<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>编辑图书</title>
    <base href="${pageContext.request.scheme}://${pageContext.request.serverName}:${pageContext.request.serverPort}${pageContext.request.contextPath}/">
    <link type="text/css" rel="stylesheet" href="static/css/style.css">
    <style type="text/css">
        h1 {
            text-align: center;
            margin-top: 200px;
        }

        h1 a {
            color: red;
        }

        input {
            text-align: center;
        }
    </style>
</head>
<body>
<jsp:include page="top.jsp"></jsp:include>

<div id="main">
    <form action="BookServlet?method=saveOrUpdate" method="post" enctype="multipart/form-data">
        <table>
            <tr>
                <input type="hidden" name="id" value="${requestScope.book.id}">
                <input type="hidden" name="pageNo" value="${param.pageNo}">
<%--                <input type="hidden" name="imgPath" value="${requestScope.book.imgPath}">--%>

                <td>名称</td>
                <td><input value="${requestScope.book.name}" name="name" type="text"/></td>
            </tr>
            <tr>
                <td>价格</td>
                <td><input value="${requestScope.book.price}" name="price" type="text"/></td>
            </tr>
            <tr>
                <td>作者</td>
                <td><input value="${requestScope.book.author}" name="author" type="text"/></td>
            </tr>
            <tr>
                <td>销量</td>
                <td><input value="${requestScope.book.sales}" name="sales" type="text"/></td>
            </tr>
            <tr>
                <td>库存</td>
                <td><input value="${requestScope.book.stock}" name="stock" type="text"/></td>
            </tr>
            <tr>
                <td>图片</td>
                <td><input name="imgPathFile" type="file" id="file_input" onchange="show_image()">
                    <img src="${requestScope.book.imgPath}" alt="" id="show_img" width="100px" height="100px" style="display: none;"/></td>
            <tr>
                <td colspan="2"><input type="submit" value="提交"/></td>
            </tr>
            </tr>
        </table>
    </form>
</div>
<div id="bottom">
			<span>
				网上书城.Copyright &copy;2020
			</span>
</div>
</body>
</html>
<script src="static/script/jquery-1.7.2.js"></script>

<script>
    $(function(){
        if( '${requestScope.book.imgPath}' != '' ){
            $("#show_img")[0].style = 'block';
        }
    });


    function show_image() {
        //抓取到上传图片的input标签的信息
        file_input = document.getElementById("file_input");
        //抓取到需要展示预览图的img标签信息
        show_img = document.getElementById("show_img");
        //回去预览图的src属性信息
        show_img.src = window.URL.createObjectURL(file_input.files[0]);
        //改变style属性中block的值
        show_img.style.display = 'block';
    }
</script>